<template>
  <a-config-provider :local="zhCN.locale">
    <router-view />
  </a-config-provider>
</template>
<script setup lang="ts">
import pubsub from "pubsub-js";
provide("pubsub", pubsub);
import { ComponentInternalInstance, getCurrentInstance, provide } from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
const ctx = getCurrentInstance();
const commonMixmin = {
  props: {
    config: {
      type: Object,
    },
    id: {
      type: String,
    },
  },
  inject: ["pubsub"],
  mounted: function () {
    this.init();
    this.pubsub.subscribe("PUT_DATA", () => {
      this.update();
    });
    this.pubsub.subscribe("PUT_OPTION", () => {
      this.update();
    });
    this.pubsub.subscribe("PUT_RESIZE", (name: string, data: string) => {
      if (data === this.id) {
        this.resize();
      }
    });
  },
  beforeUnmount() {
    this.destroy();
  },
  methods: {
    init: function () {},
    update: function () {},
    resize: function () {},
    destroy: function () {},
  },
};
// (ctx as ComponentInternalInstance).appContext.app.component("v-text", {
//   mixins: [commonMixmin],
//   template: `
//     <div style="color:red;'">123123 {{config}}</div>
//   `,
// });

// (ctx as ComponentInternalInstance).appContext.app.component("v-chart", {
//   mixins: [commonMixmin],
//   template: `
//     <div style="width: 100%;height: 100%;" ref="chart"></div>
//   `,
//   // mounted() {
//   //   this.init();
//   //   this.pubsub.subscribe("PUT_DATA", () => {
//   //     this.update();
//   //   });
//   //   this.pubsub.subscribe("PUT_OPTION", () => {
//   //     this.update();
//   //   });
//   //   this.pubsub.subscribe("PUT_RESIZE", (name: string, data: string) => {
//   //     if (data === this.id) {
//   //       this.resize();
//   //     }
//   //   });
//   // },
//   methods: {
//     init() {
//       if (!window._charts) {
//         window._charts = {};
//       }
//       this.$nextTick(() => {
//         window._charts[this.id] = window.echarts.init(this.$refs.chart);
//
//         window._charts[this.id].setOption(this.config, true);
//       });
//     },
//     update() {
//       console.log(this.config)
//       window._charts[this.id].setOption(this.config, true);
//     },
//     resize() {
//       console.log(this, "resize");
//       window._charts[this.id].resize();
//     },
//     destroy() {
//       if (window._charts[this.id]) {
//         window._charts[this.id].dispose();
//         window._charts[this.id] = null;
//       }
//     },
//   },
// });
</script>
<style lang="less">
ul{
  margin:0 !important;
}
</style>
